@layout("/common/_container.html"){
<!--<script src="${ctxPath}/static/modular/huamao/messages/ckeditor.js"></script>-->

<style>
.left, .right {
	width: 40%;
	float: left;
	height: 200px;
	border: 1px solid #aaa;	overflow:auto;
}

.center {
	float: left;
	width: 18%;
	height: 200px;
}

.go_is, .go_no {
	background-color: #008000;
	color: #fff;
	text-align: center;
	margin: 0 auto;
	margin-top: 30px;
	width: 80%;
	padding: 5px 0;
}

.keep {
	width: 80px;
	height: 30px;
}

.contain {
	overflow: hidden;
}

.footer {
	width: 100%;
	text-align: center;
	clear: both;
	margin-top: 50px;
}

li {
	list-style: none;
}
</style>

<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>发送消息</h5>
			</div>
			<div class="ibox-content">
				<div class="row row-lg">
					<div class="col-sm-12">
						<div class="row"></div>
						发送类型：
						<input type="radio" id="shop" name="types" value='1'
							checked="checked" onclick="hideDiv()" />店铺&nbsp;&nbsp;&nbsp;
						<input type="radio" id="specify" name="types" value='0'
							onclick="showDiv()" />指定账户<br /> <#button name="消息列表页面"
						icon="fa fa-arrow-circle-right" clickFun="Messages.list()"/>

					<!-- 指定用户时使用  -->
						<div id="designatedUser" style="display: none;">
							<div class="row">
							<div class="col-sm-3" style="width: 350px"><#NameCon
								id="userPhone" name="账号" placeholder="请输入要发送信息的账号的手机号"/></div>
							<div class="col-sm-3" style="width: 250px"><#button
								name="查询" icon="fa-search" clickFun="Messages.seach()"/></div>
							</div>
							<div class="row">
								<div id="app" style="width: 520px">
								<div class="contain">
									<div class="left">
										<li v-for="v in list"><label><input
												type="checkbox" :value="v.id" />{{v.name}}</label></li>
									</div>
									<div class="center">
										<div class="go_is" v-on:click="go_is()">>></div>
										<div class="go_no" v-on:click="go_no()"><<</div>
									</div>
									<div class="right">
										<li v-for="v in list2"><label><input
												type="checkbox" :value="v.id" />{{v.name}}</label></li>
									</div>
								</div>
								<div class="footer">
									
								</div>
							</div>
							</div>
					</div>

						<div class="row">
							<div class="col-sm-3 col-sm-editor" style="width: 750px">
						<!-- 富文本编辑器 -->
						<div id="editor">
							<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
						</div>

						<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
						<script type="text/javascript" src="${ctxPath}/static/modular/huamao/public/wangEditor-3.1.1/release/wangEditor.min.js"></script>
						<script type="text/javascript">
                            var E = window.wangEditor
                            var editor = new E('#editor')
                            // 或者 var editor = new E( document.getElementById('editor') )
                            // 配置服务器端地址
                            editor.customConfig.uploadImgServer = '/messages/aliyunUpload'
                            editor.customConfig.uploadFileName = 'file'
                            // 进行下文提到的其他配置
                            // ……
                            // ……
                            // ……
                            editor.create()
						</script>
						<!--<textarea rows="30" cols="50" id="msgContent" name="editor01">请输入.</textarea>-->
						<!--<script>-->
							<!--CKEDITOR.replace('editor01', {-->
								<!--filebrowserImageUploadUrl : Feng.ctxPath-->
										<!--+ '/uploadImg/uploadImg',-->
								<!--language : 'zh-cn',-->
							<!--});-->
						<!--</script>-->
						<!-- <textarea id="template_content"	name="template_content" style="width:80%;height:400px;"></textarea> -->
							</div>
						</div>
						<div class="row">
							<div class="col-sm-3" style="width: 250px">
						<#button name="发送" icon="a-plus" clickFun="Messages.submint()"/>
							</div>
						</div>
						<div class="hidden-xs" id="MessagesTableToolbar" role="group">
						</div>
						<#table id="MessagesTable"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="${ctxPath}/static/modular/huamao/messages/messages.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/modular/huamao/messages/jquery.min.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/modular/huamao/messages/vue.min.js"></script>
<script src="${ctxPath}/static/modular/huamao/public/goodscats.js"></script>
<script src="${ctxPath}/static/js/jquery.min.js"></script>
<script src="${ctxPath}/static/js/vue.min.js"></script>
<script type="text/javascript">
	var list = [/* {
						name: '产品一',
						id: '001',
						isRecommend: '否'
					},
					{
						name: '产品二',
						id: '002',
						isRecommend: '否'
					},
					{
						name: '产品三',
						id: '003',
						isRecommend: '否'
					},
					{
						name: '产品四',
						id: '004',
						isRecommend: '否'
					} */
	];
	var list2 = [/* {
						name: '产品2',
						id: '0011',
						isRecommend: '是'
					},
					{
						name: '产品二2',
						id: '0012',
						isRecommend: '是'
					},
					{
						name: '产品三2',
						id: '0013',
						isRecommend: '是'
					},
					{
						name: '产品四2',
						id: '0014',
						isRecommend: '是'
					} */
	];
	new Vue({
		el : '#app',
		data : {
			list : list,
			list2 : list2
		},
		methods : {
			go_is : function() {
				go_is();
			},
			go_no : function() {
				go_no();
			},
			keep : function() {
				keep();
			}
		}
	})
	function go_is() {
		var checked = $('.left input[type=checkbox]:checked');
		$('input[type=checkbox]').removeAttr('checked');
		if (checked.length > 0) {
			$.each(checked, function(i, v) {
				var cid = v.value;
				for (var s = 0; s < list.length; s++) {
					if (list[s].id == cid) {
						list2.push(list[s]);
						list.splice(s, 1);
					}
				}
			})
		}
	};

	function go_no() {
		var checked = $('.right input[type=checkbox]:checked');
		$('input[type=checkbox]').removeAttr('checked');
		if (checked.length > 0) {
			$.each(checked, function(i, v) {
				var cid = v.value;
				for (var s = 0; s < list2.length; s++) {
					if (list2[s].id == cid) {
						list.push(list2[s]);
						list2.splice(s, 1);
					}
				}
			})
		}
	}

	function keep() {
		var to_right = [];
		var to_left = [];
		$.each(list, function(i, v) {
			if (v.isRecommend == '是') {
				to_left.push(list[i].id)
			}
		})
		$.each(list2, function(i, v) {
			if (v.isRecommend == '否') {
				to_right.push(list2[i].id)
			}
		})
		alert(to_right + '改为推荐;' + to_left + '改为不推荐');

		var style = $("#style").val();

		var obj = {
			style : style,
			to_left : to_left,
			to_right : to_right
		}
		$.post("/goods/batchUpdate", {
			"to_left" : to_left,
			"to_right" : to_right,
			"style" : style
		}, function(result) {

		})

	}
</script>
@}
